<!-- <template>
	<div class="session-progress-container rr-ignore">
           <img class="calling-image" src="../assets/logo.png">
           <div class="progress_title" v-show="progressTitle && !agentClientId">{{progressTitle}}</div>
           <div class="progress_title" v-show="agentClientId">正在与坐席{{agentId}}同屏通话中</div>
           <div :class="{'end-view-hidden':!openView,'end-view-open':openView}">
                <img class="open-image" src="../assets/expansion.png" @click="open" v-show="!openView"/>
				<img class="open-image" src="../assets/retraction.png" @click="close"  v-show="openView"/>
				<div  v-show="openView" class="end-screen-sync">结束同屏</div>
				<div  v-show="openView" class="line-view"></div>
				<img class="hangup-image" src="../assets/hangup_session.png"/>
           </div>
       </div>
</template>

<script>
/*eslint-disable */
/*eslint-enable */
export default {
	name: 'Test',
	data() {
		return {
			agentId: '', // 同屏的坐席id
			agentClientId: '111', // 同屏的坐席clientId
            openView:false,
		};
	},
	mounted() {},
	methods: {
		open(){
          this.openView = true;
		},
		close(){
          this.openView = false;
		},
	}
};
</script>

<style scoped>
.session-progress-container{
    width:100%;
    height: 36px;
    background: rgba(0, 0, 0, 0.73);
    /* opacity: 0.73; */
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 999999999;
    pointer-events: auto;
}
.progress_title{
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 17px;
}
.end-btn{
    /* width: 24px;
    height: 17px; */
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 22px;
    width: 56px;
    height: 22px;
    background: #DD2B2B;
    border-radius: 14px;
    text-align: center;
    margin-left: calc(100% - 66px);
    cursor: pointer;
}
.calling-image{
    width: 14px;
    height:14px;
    margin-left: 10px;
    margin-right: 10px;
}
.end-view-hidden{
    flex: 1;
	display: flex;
    flex-direction: row;
    align-items: center;
	justify-content: flex-end;
}
.end-view-open{
    flex: 1;
	display: flex;
    flex-direction: row;
    align-items: center;
	justify-content: flex-end;
	background: #2A2A2A;
	height: 36px;
	min-width: 200px;
	margin-left: 20px;
}
.hangup-image{
	width:48px;
	height: 22px;
	margin-right: 12px;
	margin-left: 12px;
	cursor: pointer;
}
.open-image{
	width: 16px;
	height: 16px;
	cursor: pointer;
}
.end-screen-sync{
	width: 72px;
	height: 25px;
	border-radius: 12px;
	border: 1px solid #656565;
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #CECECE;
	line-height: 25px;
	text-align: center;
	margin-left:12px;
	cursor: pointer;
}
.line-view{
	margin-left:12px;
	width: 1px;
	height: 10px;
	background: #656565;
	border-radius: 1px;
}
</style> -->


<template>
	<div class="signature-container" id="signature-container-view">
		<div><</div>
		<div class="signatureBox">
			<div class="canvasBox" ref="canvasHW">
				<div class="bg-title">请在此处签名</div>
				<canvas ref="canvasF" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp"></canvas>
				<div class="btnBox">
					<button type="default" @click="overwrite">重写</button>
					<button size="small" type="primary" @click="commit">
						提交签名
					</button>
				</div>
			</div>
		</div>
	</div>
	</template>
	 
	<script>
	export default {
	  data() {
		return {
		  client: {},
		  points: [],
		  canvasTxt: null,
		  startX: 0,
		  startY: 0,
		  moveY: 0,
		  moveX: 0,
		  endY: 0,
		  endX: 0,
		  w: null,
		  h: null,
		  isDown: false,
		  isViewAutograph: this.$route.query.isViews > 0,
		  contractSuccess: this.$route.query.contractSuccess,
				imgUrl: ''
		}
	  },
	  created() {},
	  mounted() {
		let canvas = this.$refs.canvasF
		canvas.height = this.$refs.canvasHW.offsetHeight - 160
		canvas.width = this.$refs.canvasHW.offsetWidth - 20
		this.canvasTxt = canvas.getContext('2d')
		this.canvasTxt.lineWidth = 3 //线条的宽度
        // 默认宽度是1.0,支持数字
		this.canvasTxt.lineCap = 'round'
	  },
	  methods: {
		//添加图片
		handleUpload(data) {
		  this.fileUrl.push(data)
		},
		backHome() {
		  window.history.back(-2)
		},
		//电脑设备事件
		mouseDown(ev) {
		  ev = ev || event
		  ev.preventDefault()
		  console.log(ev)
		  let obj = {
			x: ev.offsetX,
			y: ev.offsetY
		  }
		  console.log(obj)
		  this.startX = obj.x
		  this.startY = obj.y
		  this.canvasTxt.beginPath()
		  this.canvasTxt.moveTo(this.startX, this.startY)
		  this.canvasTxt.lineTo(obj.x, obj.y)
		  this.canvasTxt.stroke()
		  this.canvasTxt.closePath()
		  this.points.push(obj)
		  this.isDown = true
		  this.imgUrl = (this.$refs.canvasF && this.$refs.canvasF.toDataURL()) || ''
		  console.log('image.png####',this.imgUrl);
		},
		//移动设备事件
		touchStart(ev) {
		  ev = ev || event
		  ev.preventDefault()
		  if (ev.touches.length == 1) {
			let obj = {
			  x: ev.targetTouches[0].clientX,
			  y: ev.targetTouches[0].clientY - 48
			}
			this.startX = obj.x
			this.startY = obj.y
			this.canvasTxt.beginPath()
			this.canvasTxt.moveTo(this.startX, this.startY)
			this.canvasTxt.lineTo(obj.x, obj.y)
			this.canvasTxt.stroke()
			this.canvasTxt.closePath()
			this.points.push(obj)
		  }
		},
		//电脑设备事件
		mouseMove(ev) {
		  ev = ev || event
		  ev.preventDefault()
		  if (this.isDown) {
			let obj = {
			  x: ev.offsetX,
			  y: ev.offsetY
			}
			this.moveY = obj.y
			this.moveX = obj.x
			this.canvasTxt.beginPath()
			this.canvasTxt.moveTo(this.startX, this.startY)
			this.canvasTxt.lineTo(obj.x, obj.y)
			this.canvasTxt.stroke()
			this.canvasTxt.closePath()
			this.startY = obj.y
			this.startX = obj.x
			this.points.push(obj)
		  }
		},
		//移动设备事件
		touchMove(ev) {
		  ev = ev || event
		  ev.preventDefault()
		  if (ev.touches.length == 1) {
			let obj = {
			  x: ev.targetTouches[0].clientX,
			  y: ev.targetTouches[0].clientY - 48
			}
			this.moveY = obj.y
			this.moveX = obj.x
			this.canvasTxt.beginPath()
			this.canvasTxt.moveTo(this.startX, this.startY)
			this.canvasTxt.lineTo(obj.x, obj.y)
			this.canvasTxt.stroke()
			this.canvasTxt.closePath()
			this.startY = obj.y
			this.startX = obj.x
			this.points.push(obj)
		  }
		},
		//电脑设备事件
		mouseUp(ev) {
		  ev = ev || event
		  ev.preventDefault()
		  let obj = {
			x: ev.offsetX,
			y: ev.offsetY
		  }
		  this.canvasTxt.beginPath()
		  this.canvasTxt.moveTo(this.startX, this.startY)
		  this.canvasTxt.lineTo(obj.x, obj.y)
		  this.canvasTxt.stroke()
		  this.canvasTxt.closePath()
		  this.points.push(obj)
		  this.points.push({
			x: -1,
			y: -1
		  })
		  this.isDown = false
		},
		//移动设备事件
		touchEnd(ev) {
		  ev = ev || event
		  ev.preventDefault()
		  if (ev.touches.length == 1) {
			let obj = {
			  x: ev.targetTouches[0].clientX,
			  y: ev.targetTouches[0].clientY - 48
			}
			this.canvasTxt.beginPath()
			this.canvasTxt.moveTo(this.startX, this.startY)
			this.canvasTxt.lineTo(obj.x, obj.y)
			this.canvasTxt.stroke()
			this.canvasTxt.closePath()
			this.points.push(obj)
			this.points.push({
			  x: -1,
			  y: -1
			})
			this.imgUrl =
			  (this.$refs.canvasF && this.$refs.canvasF.toDataURL()) || ''
		  }
		  console.log('image.png####',this.imgUrl);
		},
		//重写
		overwrite() {
		  this.canvasTxt.clearRect(
			0,
			0,
			this.$refs.canvasF.width,
			this.$refs.canvasF.height
		  )
		  this.points = []
		},
		//提交签名
		commit() {
		  console.log(this.$refs.canvasF.toDataURL()) //签名
		}
	  }
	}
	</script>
	 
	<style scoped>
	.signatureBox {
	  position: absolute;
	  top: 50px;
	  left: 0px;
	  width: 100%;
	  height: calc(60% - 50px);
	  box-sizing: border-box;
	  overflow: hidden;
	  background: #fff;
	  z-index: 100;
	  display: flex;
	  flex-direction: column;
	}

	.bg-title{
		position: absolute;
		left: 100px;
		top:100px;
		color: red;
	}
	 
	.visaDetailTop {
	  width: 100%;
	  padding: 5px;
	  box-sizing: border-box;
	  z-index: 2;
	}
	 
	.visaDetailTop p {
	  margin: 0px;
	  text-align: center;
	  color: #000;
	  font-size: 1em;
	  position: relative;
	}
	 
	p.visaTitle {
	  width: 100%;
	  position: absolute;
	  top: 5px;
	  left: 0px;
	  text-align: center;
	  font-size: 1.2em;
	}
	 
	.btnBack {
	  display: block;
	  position: absolute;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 100%;
	  z-index: 1;
	  background: transparent;
	  border-color: transparent;
	  outline: none;
	}
	 
	.btnDaoHang {
	  display: block;
	  position: absolute;
	  left: 0px;
	  top: 0px;
	  height: 2.2em;
	  width: 2em;
	  z-index: 1;
	  background: transparent;
	  border-color: transparent;
	  outline: none;
	}
	 
	.visaDetailTop p span {
	  color: #fff;
	  font-size: 1.2em;
	}
	 
	.visaDetailTop p:first-of-type {
	  float: left;
	}
	 
	.visaDetailTop p:nth-of-type(2) {
	  float: right;
	}
	 
	.canvasBox {
	  padding: 10px 5px;
	  box-sizing: border-box;
	  flex: 1;
	}
	 
	canvas {
	  border: 1px solid #e3e3e3;
	}
	 
	.btnBox {
	  /*height: 30px;*/
	  padding: 5px;
	  text-align: right;
	  /*line-height: 30px;*/
	}
	 
	.btnBox button:first-of-type {
	  background: transparent;
	  border-radius: 4px;
	  height: 40px;
	  width: 80px;
	  font-size: 14px;
	  /*padding: 5px 10px;*/
	}
	 
	.btnBox button:last-of-type {
	  /*border: 1px solid #71b900;*/
	  background: #71b900;
	  color: #fff;
	  border-radius: 4px;
	  height: 40px;
	  width: 80px;
	  font-size: 14px;
	  /*padding: 5px 10px;*/
	}
	 
	@media only screen and (min-width: 750px) {
	  .signatureBox {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		min-height: 100%;
		box-sizing: border-box;
		overflow: visible;
	  }
	}
	</style>